<script lang="ts">
	import List, { Item, Graphic, Separator, Text } from '@smui/list';
	import Accordion, { Panel, Header, Content } from '@smui-extra/accordion';
	import Button from '@smui/button';

	let clicked = 'nothing yet';
	export let list: DataType[] = [];
</script>

<Accordion
	multiple
	class="reset-shrink-panel flex flex-col gap-4px"
	style="--mdc-theme-surface: #e5e7eb"
>
	{#each list as item, index (index)}
		<Panel>
			<Header>{item.ename}</Header>
			<Content>
				{#if item.children && item.children.length}
					<List class="demo-list" dense>
						{#each item.children as unit, k}
							<Item on:SMUI:action={() => (clicked = 'Edit')} activated={k === 2 ? true : false}>
								{#if k === 0}
									<Graphic class="material-icons"></Graphic>
								{:else}
									<Graphic class="material-icons"></Graphic>
								{/if}
								<Text>{unit.ename}</Text>
							</Item>
						{/each}
					</List>
				{:else}
					<div class="color-gray-4 h-36px line-height-36px indent-40px px-16px">none</div>
				{/if}
			</Content>
		</Panel>
	{/each}
</Accordion>
